<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>蛋糕</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        text-decoration: none;
      }
      #AAA {
        background-color: rgb(245, 245, 245);
        height: 1000px;
      }
      /* 导航栏 */
      .header {
        z-index: 1;
        width: 100%;
        background: #ffffff;
        border-bottom: 1px solid #e8e8e8;
        display: flex;
        justify-content: space-between;
        position: fixed;
      }
      .header a {
        color: #969696;
      }
      .header a:hover {
        color: black;
      }
      .header span {
        color: #969696;
      }
      .header-left {
        display: flex;
        float: left;
        height: 70px;
      }
      .snacks {
        width: 90px;
        height: 42px;
        float: left;
        padding-top: 25px;
        border-right: 1px solid #e8e8e8;
      }
      .cakes {
        width: 90px;
        height: 42px;
        float: left;
        padding-top: 25px;
        border-right: 1px solid #e8e8e8;
        border-top: 3px #ffe32a solid;
      }
      .location,
      .products,
      .home,
      .cakes,
      .breads,
      .bds {
        width: 90px;
        height: 45px;
        float: left;
        padding-top: 25px;
        border-right: 1px solid #e8e8e8;
      }
      .products:hover {
        width: 90px;
        height: 42px;
        float: left;
        padding-top: 25px;
        border-right: 1px solid #e8e8e8;
        border-top: 3px #ffe32a solid;
      }
      .home:hover {
        width: 90px;
        height: 42px;
        float: left;
        padding-top: 25px;
        border-right: 1px solid #e8e8e8;
        border-top: 3px #ffe32a solid;
      }
      .cakes:hover {
        width: 90px;
        height: 42px;
        float: left;
        padding-top: 25px;
        border-right: 1px solid #e8e8e8;
        border-top: 3px #ffe32a solid;
      }
      .breads:hover {
        width: 90px;
        height: 42px;
        float: left;
        padding-top: 25px;
        border-right: 1px solid #e8e8e8;
        border-top: 3px #ffe32a solid;
      }
      .snacks:hover {
        width: 90px;
        height: 42px;
        float: left;
        padding-top: 25px;
        border-right: 1px solid #e8e8e8;
        border-top: 3px #ffe32a solid;
      }
      .bds:hover {
        width: 90px;
        height: 42px;
        float: left;
        padding-top: 25px;
        border-right: 1px solid #e8e8e8;
        border-top: 3px #ffe32a solid;
      }

      .location,
      .products,
      .home,
      .cakes,
      .breads,
      .snacks,
      .bds,
      span {
        width: 90px;
        display: inline-block;
        text-align: center;
        font-size: 15px;
      }

      .header-right {
        float: right;
        width: 270px;
        height: 70px;
        display: flex;
      }

      .head-span,
      .mycar,
      .activity {
        width: 90px;
        height: 45px;
        border-left: 1px solid #e8e8e8;
        font-size: 15px;
        padding-top: 25px;
      }

      .zhuce,
      .login {
        width: 30px;
        height: 17px;
      }

      .car {
        width: 18px;
        height: 20px;
        margin-left: 36px;
      }

      .icon2 {
        width: 23px;
        height: 13px;
        margin-left: 33.5px;
      }

      .B {
        margin: 0 auto;
        position: relative;
        top: 100px;
        width: 1400px;
        height: 150px;
        background-color: #fff;
        border-radius: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .BB {
        margin: 0 auto;
        width: 1300px;
        height: 150px;
      }
      .Bb {
        padding: 12px;
      }
      .Bb a {
        color: rgba(0, 0, 0, 0.9);
      }
      .aa {
        padding: 0 20px 0 20px;
      }
      .aa1 {
        padding: 15px;
      }
      .aa-1 {
        padding: 0 25px 0 28px;
      }
      .aa-11 {
        padding: 0 20px 0 20px;
        width: 25px;
        border-radius: 5px;
        background-color: #ffe32a;
      }
      .aa:active {
        border-radius: 5px;
        background-color: #ffe32a;
      }
      .aa-1:active {
        border-radius: 5px;
        background-color: #ffe32a;
      }
      .aa:focus {
        border-radius: 5px;
        background-color: #ffe32a;
      }
      .aa-1:focus {
        border-radius: 5px;
        background-color: #ffe32a;
      }
      .aaa {
        padding: 0 20px 0 20px;
      }
      .aaaa {
        padding: 0 20px 0 20px;
        border-radius: 5px;
        background-color: #ffe32a;
      }
      .aaa:active {
        border-radius: 5px;
        background-color: #ffe32a;
      }
      .aaa:focus {
        border-radius: 5px;
        background-color: #ffe32a;
      }
    </style>
  </head>

  <body style="overflow-x: hidden">
    <div id="AAA">
      <div class="header">
        <div class="header-left">
          <div class="logo">
            <a href="#"><img src="./img/logo.png" alt="" /></a>
          </div>
          <div class="location">
            <a href="#">
              <span>上海市</span>
            </a>
          </div>
          <div class="products">
            <a href="#">
              <span>所有产品</span>
            </a>
          </div>
          <div class="home">
            <a href="#">
              <span>首页</span>
            </a>
          </div>
          <div class="cakes">
            <a href="#">
              <span>蛋糕</span>
            </a>
          </div>
          <div class="breads">
            <a href="#">
              <span>面包</span>
            </a>
          </div>
          <div class="snacks">
            <a href="#">
              <span>小食</span>
            </a>
          </div>
          <div class="bds">
            <a href="#">
              <span>企业专区</span>
            </a>
          </div>
        </div>
        <div class="header-right">
          <div class="login-header">
            <span class="head-span">
              <span class="zhuce"><a href="#">注册</a></span
              >&nbsp;|&nbsp;<span class="login"><a href="#">登录</a></span>
            </span>
          </div>
          <div class="mycar">
            <a href="#"><img class="car" src="./img/car.png" alt="" /></a>
          </div>
          <div class="activity">
            <a href="#"><img class="icon2" src="./img/icon02.png" alt="" /></a>
          </div>
        </div>
      </div>
      <div class="B">
        <div class="BB">
          <div class="Bb">
            <span class="aa1">场景:</span>
            <a href="#" class="aa-11">全部</a>
            <a href="#" class="aa-1">生日</a>
            <a href="#" class="aa">聚会</a>
            <a href="#" class="aa">情侣</a>
            <a href="#" class="aa-1">儿童</a>
            <a href="#" class="aa-1">长辈</a>
          </div>
          <div class="Bb">
            <span class="aa1">口味:</span>
            <a href="#" class="aaaa">全部</a>
            <a href="#" class="aaa">拿破仑</a>
            <a href="#" class="aaa">奶油</a>
            <a href="#" class="aaa">慕斯</a>
            <a href="#" class="aaa">芝士</a>
            <a href="#" class="aaa">巧克力</a>
            <a href="#" class="aaa">咖啡</a>
            <a href="#" class="aaa">坚果</a>
            <a href="#" class="aaa">水果</a>
            <a href="#" class="aaa">冰淇淋</a>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
